<template>
    <div>
        <MyHeader :background="'blue'" title="TabBar案例"></MyHeader>
        <div class="main">
            <router-view></router-view>
        </div>
        <MyTabBar :list="tabList" @Tab="TabFn"></MyTabBar>
    </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyTabBar from './components/MyTabBar.vue'
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'
export default {
    components: {
        MyTabBar,
        MyHeader,
        MyGoodsList,
        MyGoodsSearch,
        MyUserInfo,
    },
    data() {
        return {
            tabList: [
                {
                    iconText: 'icon-shangpinliebiao',
                    text: '商品列表',
                    componentName: 'MyGoodsList',
                },
                {
                    iconText: 'icon-sousuo',
                    text: '商品搜索',
                    componentName: 'MyGoodsSearch',
                },
                {
                    iconText: 'icon-user',
                    text: '我的信息',
                    componentName: 'MyUserInfo',
                },
            ],
        }
    },
    methods: {
        TabFn(comName) {
            this.$router.push({
                name: comName,
            })
            // console.log(comName)
        },
    },
}
</script>

<style scoped>
.main {
    padding-top: 45px;
    padding-bottom: 51px;
}
</style>
